<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='新增轮播图-中楚鸿',active='carousel'">
<header th:replace="admin/header::headerFragment(${title},${active})"></header>

<link th:href="@{/plugin/imageUpload/css/upload.css}" rel="stylesheet"/>
<link th:href="@{/plugin/dropify/css/dropify.min.css}" rel="stylesheet"/>

<body class="fixed-left">
<div id="wrapper">
    <div th:replace="admin/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">
                            <a style="font-size: 16px; color: #666666;" href="javascript:void(0)" onclick="window.history.go(-1);"><i class="fa fa-chevron-left" aria-hidden="true"></i>&nbsp;&nbsp;返回</a>
                        </h4>
                    </div>
                    <div class="col-md-12">
                        <form id="carouselForm" role="form" novalidate="novalidate">
                            <input type="hidden" name="id" th:value="${carousel!=null and carousel.id!=null}?${carousel.id}: ''" id="id"/>
                            <div class="form-group">
                                <label for="img">轮播图URL</label>
                                <input id="img" name="img" type="text" class="form-control" th:value="${carousel!=null and carousel.img !=null}?${carousel.img}: ''" />
                            </div>

                            <div class="upload-box">
                                <label>轮播图</label>
                                <input type="file" id="input-file-now" class="dropify"  th:attr="data-default-file=${carousel!=null and carousel.img !=null}?${carousel.img}: ''" />
                            </div>

                            <div class="row">
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="type">所属模块</label>
                                        <select id="type" name="type" class="form-control">
                                            <option value="IDENTIFICATION_CAROUSELS" th:selected="${carousel!=null and carousel.type=='IDENTIFICATION_CAROUSELS'}?true:false">名牌认定</option>
                                            <option value="APPLICATION_CAROUSELS" th:selected="${carousel!=null and carousel.type=='APPLICATION_CAROUSELS'}?true:false">项目申报</option>
                                            <option value="TAX_CAROUSELS" th:selected="${carousel!=null and carousel.type=='TAX_CAROUSELS'}?true:false">税务筹划</option>
                                            <option value="IPO_CAROUSELS" th:selected="${carousel!=null and carousel.type=='IPO_CAROUSELS'}?true:false">上市融资</option>
                                            <option value="LAND_CAROUSELS" th:selected="${carousel!=null and carousel.type=='LAND_CAROUSELS'}?true:false">产业用地</option>
                                            <option value="ABOUT_CAROUSELS" th:selected="${carousel!=null and carousel.type=='ABOUT_CAROUSELS'}?true:false">关于我们</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="text-right">
                                <button type="submit" class="btn btn-primary waves-effect waves-light">保存</button>
                            </div>
                        </form>
                    </div>

                </div>
                <div th:replace="admin/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/footer :: footer"></div>

<script th:src="@{//cdn.bootcss.com/jquery-toggles/2.0.4/toggles.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/jquery-validate/1.15.1/jquery.validate.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/jquery-validate/1.15.1/localization/messages_zh.min.js}"></script>
<script th:src="@{/plugin/imageUpload/js/upload.js}"></script>

<script src="/plugin/dropify/js/dropify.js"></script>

<script type="text/javascript">
    /*<![CDATA[*/

    $('.dropify').dropify({
        messages: {
            'default': '点击或拖拽文件到这里',
            'replace': '点击或拖拽文件到这里来替换文件',
            'remove': '移除文件',
            'error': '对不起，你上传的文件太大了',
        }
    });

    //表单提交
    var tale = new $.tale();
    // validate the comment form when it is submitted
    $('#carouselForm').validate({
        submitHandler: function (form) {
            //$(".dropify-render img").attr('src');
            var imgUrlBase64 = $(".dropify-render img").attr('src');
            if(imgUrlBase64.indexOf("data:image/") != -1){
                $('#img').val(imgUrlBase64);
            }
            var params =  $("#carouselForm").serialize();
            var url = '/admin/carousel/save';
            tale.post({
                url:url,
                data:params,
                //contentType:"application/json;charset=utf-8",
                success: function (result) {
                    if (result && result.success) {
                        tale.alertOk({
                            text:'保存成功',
                            then: function () {
                                setTimeout(function () {
                                    window.location.href = '/admin/carousel/list';
                                }, 500);
                            }
                        });
                    } else {
                        tale.alertError(result.msg || '保存失败');
                    }
                }
            });
        }
    });

    /*]]>*/
</script>

</body>
</html>